<script lang='ts' setup>
// import router from '@/router';
// import { ref } from 'vue';

import { useRouter  } from 'vue-router';
const router = useRouter()

function toWorkingEdition(): void {
  router.push("/chat/working-edition")
}
function toYouthVersion(): void {
  router.push("/chat/online-search")
}
function toAiDraw(): void {
  router.push("/chat/aidraw")
}
function toDocumentQA(): void {
  router.push("/chat/documentQA")
}
function toMindMap(): void {
  router.push("/chat/mind-map")
}

</script>
<template>
  <div class="tariffCards flex">
    <div class="economy" @click="toWorkingEdition">
      <icon-computer size="40" />
      <h3>高效问答</h3>
      <span>working edition</span>
    </div>
    <div class="premiumeconomy" @click="toYouthVersion">
      <icon-mobile size="40" />
      <h3>在线检索</h3>
      <span>online search</span>
    </div>
    <div class="business" @click="toAiDraw">
      <icon-file size="40" />
      <h3>随心作画</h3>
      <span>draw freely</span>
    </div>
    <div class="first" @click="toDocumentQA">
      <icon-file size="40" />
      <h3>文档分析</h3>
      <span>document analysis</span>
    </div>
    <div class="mind" @click="toMindMap">
      <icon-mind-mapping size="40" />
      <h3>思维导图</h3>
      <span>mind mapping</span>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.tariffCards {
  min-height: 400px;
  margin-right: -85px;
  user-select: none;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

.tariffCards:after {
  position: absolute;
  bottom: -27px;
  left: 5%;
  content: "";
  width: 65%;
  height: 10px;
  border-radius: 100%;
  background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0));
}

.tariffCards>div {
  position: relative;
  width: 280px;
  height: 140px;
  margin-left: -70px;
  border-radius: 12px;
  color: white;
  transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
  transition: all 0.4s ease;
  overflow: hidden;
  cursor: pointer;
}

.tariffCards>div:after {
  position: absolute;
  top: -70px;
  left: 0;
  content: "";
  width: 200%;
  height: 200%;
  background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
  transform: translateX(-100%);
}

.tariffCards>div svg {
  margin-top: 15px;
  margin-left: 15px;
  pointer-events: none;
}

.tariffCards>div h3 {
  position: absolute;
  bottom: 28px;
  left: 15px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 7px;
}

.tariffCards>div span {
  position: absolute;
  font-weight: 700;
  bottom: 15px;
  left: 15px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
  letter-spacing: 5px;
}

.tariffCards>div.economy {
  z-index: 3;
  background-color: #8063E1;
  background-image: linear-gradient(135deg, #7b92e8, #8063E1);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063E1;
}

.tariffCards>div.premiumeconomy {
  margin-top: 100px;
  margin-left: -10px;
  margin-right: -50px;
  z-index: 2;
  background-color: #3F58E3;
  background-image: linear-gradient(135deg, #7be8c0, #3F58E3);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3F58E3;
}


.tariffCards>div.business {
  margin-top: -100px;
  z-index: 1;
  background-color: #2C6FD1;
  background-image: linear-gradient(135deg, #fb21fe, #2C6FD1);
  box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2C6FD1;
}

.tariffCards>div.first {
  margin-top: 100px;
  background-color: #352F64;
  background-image: linear-gradient(135deg, #bfa33f, #352F64);
  box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.1), 1px 1px 0px 1px #352F64;
}

.tariffCards>div.mind {
  background-color: #352F64;
  background-image: linear-gradient(135deg, #21fe51, #2C6FD1);
  box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.1), 1px 1px 0px 1px #2C6FD1;
}

.tariffCards>div:hover {
  transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
  z-index: 99 !important;
}

.tariffCards>div:hover:after {
  transform: translateX(100%);
  transition: all 1.2s ease-in-out;
}


@media screen and (max-width: 1200px) {
  .tariffCards {
    display: block !important;
    margin-top: 100px;
    margin-bottom: -30px;
    margin-right: 0;
  }

  .tariffCards>div {
    margin-left: 0;
    margin-top: -70px !important;
    transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
  }
}
</style>
